<template>
  <div class="dashboard-container">
    <div class="app-container">
      <div class="edit-form">
        <el-dialog width="700px" title=" 添加数据 " :visible="dialogVisible" @close="close">
          <el-form ref="jobForm" :model="jobForm" :rules="jobRules" label-width="220px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="职位名称" prop="name">
                  <el-input v-model="jobForm.name" size="mini" class="inputW" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="职位编码" prop="code">
                  <el-input v-model="jobForm.code" size="mini" class="inputW" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="所属组织" prop="departmentId">
                  <!-- TODO：封装所属组织级联组件 -->
                  <SelectTreeDept v-model="jobForm.departmentId" class="inputW" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="职位类别" prop="categoryId">
                  <!-- TODO：封装职位类别级联组件 -->
                  <SelectTreeCate v-model="jobForm.categoryId" class="inputW" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="对应职务" prop="jobType">
                  <el-select v-model="jobForm.jobType" size="mini" class="inputW">
                    <!-- 提示：作业对接的是JSON-SERVER提供的接口，无法关联到对应职务ID，所以value直接绑定对应职务名称 -->
                    <el-option label="员工" value="员工" />
                    <el-option label="经理" value="经理" />
                    <el-option label="办事员" value="办事员" />
                    <el-option label="董事" value="董事" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="对应职级" prop="level">
                  <el-select v-model="jobForm.level" size="mini" class="inputW">
                    <!-- 提示：作业对接的是JSON-SERVER提供的接口，无法关联到对应职级ID，所以value直接绑定对应职级名称 -->
                    <el-option label="P1" value="P1" />
                    <el-option label="P2" value="P2" />
                    <el-option label="P3" value="P3" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="职位描述" prop="introduce">
                  <el-input v-model="jobForm.introduce" type="textarea" :rows="3" size="mini" class="inputW" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="职位状态" prop="state">
                  <el-switch v-model="jobForm.state" size="mini" :active-value="1" :inactive-value="0" class="inputW" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :span="12" style="margin-left:220px">
                <el-button size="mini" @click="close">取消</el-button>
                <el-button size="mini" type="primary" @click="confirmClick">确定</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import SelectTreeDept from '@/views/zhiweiguanli/components/select-tree-dept.vue'
import SelectTreeCate from '@/views/zhiweiguanli/components/select-tree-cate.vue'
import { addJob } from '@/api/homework/position'
export default {
  components: {
    SelectTreeDept,
    SelectTreeCate
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      jobForm: {
        categoryId: null,
        categoryName: '',
        name: '',
        code: '',
        departmentId: null,
        departmentName: '',
        jobType: '',
        level: '',
        state: 0,
        introduce: ''
      },
      jobRules: {
        // 校验规则
        categoryId: [
          { required: true, message: '职位类别不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '职位名称不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '职位类别1-10位', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '职位编码不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '职位类别1-10位', trigger: 'blur' }
        ],
        departmentId: [
          { required: true, message: '所属组织不能为空', trigger: 'blur' }
        ],
        jobType: [
          { required: true, message: '对应职务不能为空', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '对应职级不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '职位描述不能为空', trigger: 'blur' },
          { min: 1, max: 100, message: '职位类别1-10位', trigger: 'blur' }
        ]
      }

    }
  },
  methods: {
    close() {
      this.$emit('close')
      // 表单重置
      this.$refs.jobForm.resetFields()
      // 手动重置
      this.jobForm = {}
    },
    confirmClick() {
      this.$refs.jobForm.validate(async valid => {
        if (!valid) return false
        await addJob(this.jobForm)
        this.$message.success('新增职位成功')
        this.close()
        this.$emit('position')
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .edit-form {
    background: #fff;
    padding: 20px;
    .inputW {
      width: 380px
    }
  }
</style>
